<template>
    <div style="z-index:999;position: fixed;left:0;right:0;top:0;text-align: center;background-color: #8c636d;">
        <a href="http://demo.mxyhn.xyz:8020/cssthemes6/2.14ZF15/index.html"
           style="color:#fff;padding:10px;display: block">
            http://demo.mxyhn.xyz:8020/cssthemes6/2.14ZF15/index.html
        </a>
    </div>
    <div style="height: 36px;"></div>
    <div id="header">
        <div id="shortcut">
            <div class="clear-float app-container" role="navigation" aria-label="顶部导航" tabindex="0">
                <ul class="fl">
                    <li @click="test">我的甜品 你的爱~</li>
                </ul>
                <ul class="fr">
                    <li>
                        <router-link class="link" to="/user/login">请登录</router-link>
                    </li>
                    <li>
                        <router-link class="link" to="/user/login?action=reg">注册</router-link>
                    </li>
                    <li>
                        <el-divider direction="vertical"></el-divider>
                    </li>
                    <li>
                        <router-link class="link" to="/user/orders">我的订单</router-link>
                    </li>
                    <li>
                        <el-divider direction="vertical"></el-divider>
                    </li>
                    <li>
                        <router-link class="link" to="/user/carts">购物车
                            <span v-if="carts_goods_count > 0">({{ carts_goods_count }})</span>
                        </router-link>
                    </li>

                </ul>
            </div>
        </div>
        <div class="nav app-container clear-float">
            <div class="fl row">
                <div class="fl" id="site-logo">
                    <router-link to="/">
                        <img class="app-logo" src="./../assets/logo.png">
                    </router-link>
                </div>
                <ul class="fl nav-wrapper row">
                    <li>
                        <router-link class="link" to="/">首页</router-link>
                    </li>
                    <li>
                        <router-link class="link" to="/goods/1">中式糕点</router-link>
                    </li>
                    <li>
                        <router-link class="link" to="/goods/2">西式式糕点</router-link>
                    </li>
                    <li>
                        <router-link class="link" to="/goods/3">日式糕点</router-link>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <el-input v-model="search_keyword" placeholder="提拉米苏" class="input-with-select">
                    <template #append>
                        <el-button :icon="Search"></el-button>
                    </template>
                </el-input>
            </div>
        </div>
    </div>
    <router-view></router-view>
    <div id="footer" style="height: 200px;background-color: #8c636d;margin-top: 20px">
        底部
    </div>
</template>

<script lang="ts">
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Search} from '@element-plus/icons'

export default {
    name: 'FrontLayout',
    setup() {

        const carts_goods_count = ref(0)
        const search_keyword = ref('')
        const test = () => {
            ElMessage.info('xxx')
        }
        return {
            Search,
            search_keyword,
            carts_goods_count,
            test
        }
    }
}
</script>

<style scoped lang="less">
@site-logo-height: 60px;
#shortcut {
    background-color: #fafafa;
    line-height: 30px;
    ul {
        display: flex;
    }

    li {
        margin-left: 10px;
    }
}

.nav {
    margin-top: 30px;
    margin-bottom: 20px;
}

.app-logo {
    height: @site-logo-height;
}

.nav-wrapper {
    height: @site-logo-height;
    margin-left: 80px;
    line-height: @site-logo-height;

    .link {
        display: inline-block;
        margin-left: 20px;
        font-size: 18px;
    }
}
</style>